<template>
  <el-form
    :model="gradeForm"
    ref="gradeFormRef"
    label-width="auto"
    style="width: 300px"
    v-loading="loading"
  >
    <el-form-item
      label="阶段性答辩次数"
      prop="answerCount"
      :rules="[
        {
          required: true,
          message: '请输入阶段性答辩次数',
          trigger: 'blur',
        },
      ]"
    >
      <el-input-number
        v-model="gradeForm.answerCount"
        :min="1"
        :step="1"
        style="width: 150px"
        disabled
      />
    </el-form-item>
    <el-form-item
      label="日常得分权重"
      prop="dailyWeight"
      :rules="[
        {
          required: true,
          message: '请输入日常得分权重',
          trigger: 'blur',
        },
      ]"
    >
      <div class="flex">
        <el-input-number
          v-model="gradeForm.dailyWeight"
          :min="1"
          :max="100"
          :step="1"
          class="mr-10"
          style="width: 150px"
        />
        <el-text>%</el-text>
      </div>
    </el-form-item>
    <el-form-item
      label="单次阶段性答辩权重"
      prop="oneWeight"
      :rules="[
        {
          required: true,
          message: '请输入单次阶段性答辩权重',
          trigger: 'blur',
        },
      ]"
    >
      <div class="flex">
        <el-input-number
          v-model="gradeForm.oneWeight"
          :min="1"
          :max="100"
          :step="1"
          class="mr-10"
          style="width: 150px"
        /><el-text>%</el-text>
      </div>
    </el-form-item>
    <el-form-item
      label="中期答辩权重"
      prop="twoWeight"
      :rules="[
        {
          required: true,
          message: '请输入中期答辩权重',
          trigger: 'blur',
        },
      ]"
    >
      <div class="flex">
        <el-input-number
          v-model="gradeForm.twoWeight"
          :min="1"
          :max="100"
          :step="1"
          class="mr-10"
          style="width: 150px"
        /><el-text>%</el-text>
      </div>
    </el-form-item>
    <el-form-item
      label="终期答辩权重"
      prop="finalWeight"
      :rules="[
        {
          required: true,
          message: '请输入终期答辩权重',
          trigger: 'blur',
        },
      ]"
    >
      <div class="flex">
        <el-input-number
          v-model="gradeForm.finalWeight"
          :min="1"
          :max="100"
          :step="1"
          class="mr-10"
          style="width: 150px"
        /><el-text>%</el-text>
      </div>
    </el-form-item>
    <div style="text-align: right">
      <el-button type="primary" @click="onAppend(gradeFormRef)">
        保存
      </el-button>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance } from "element-plus";
import api from "@/api";

const gradeFormRef = ref();
const loading = ref(false);
const gradeForm = ref<any>({
  answerCount: 1,
  dailyWeight: 1,
  oneWeight: 1,
  twoWeight: 1,
  finalWeight: 1,
});
const cloneData = ref(null);

function getTableData(val: number) {
  loading.value = true;
  api.score
    .queryScoreWeight()
    .then((res: any) => {
      if (res.success) {
        gradeForm.value = res.data;
        cloneData.value = {
          ...res.data,
        };
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
}
function onAppend(formEl: FormInstance | undefined) {
  if (!formEl) return;
  //@ts-ignore
  formEl.validate((valid) => {
    if (valid) {
      api.score.updateScoreWeight(gradeForm.value).then((res: any) => {
        ElMessage({
          message: res.message,
          type: res.success ? "success" : "error",
          grouping: true,
          showClose: true,
        });
      });
    }
  });
}
onMounted(() => {
  getTableData(1);
});
</script>
